<template>
    <div>
        <el-dialog
                title="电影详情"
                :visible.sync="movieShow"
                width="30%"
                :destroy-on-close="true"
        >
            <Movie :movie-id="movieId"></Movie>
        </el-dialog>

        <template>
            <el-table
                    :data="movieList"
                    style="width: 100%"
                    highlight-current-row
                    @current-change="handleCurrentChange">
                <el-table-column
                        prop="name"
                        label="电影名"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="上映时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="数量"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="280">
                    <template>
                        <el-popconfirm
                                title="确定购买?"
                                @confirm="buy(movieName,movieDate,moviePrice)"
                        >
                            <el-button type="primary" slot="reference" icon="el-icon-shopping-cart-full" @click="buy">购买</el-button>
                        </el-popconfirm>
                        <el-button type="primary" icon="el-icon-reading" style="margin-left: 10px" @click="lookOrder(movieId)">查看详情</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
    // @ is an alias to /src


    import Movie from "./Movie";
    export default {
        name: 'Home',

        components: {Movie},
        data() {
            return {
                movieList:"",
                movieShow: false,
                currentRow: null,

                movieName:'',
                movieDate:'',
                moviePrice:'',
                movieNum:'',
                movieId:0,
            }
        },
        mounted(){
            this.init()
        },
        methods:{
            init:function () {
                this.axios.get('api/findAll').then(
                    r =>this.movieList =  r.data
                )
            },
            // eslint-disable-next-line no-unused-vars
            buy:function (name,time,price) {
                var obj = new URLSearchParams();
                obj.append("name",name);
                obj.append("time",time);
                obj.append("price",price);
                obj.append("money",100);
                this.axios.post('/findAll/add',obj)
            },
            handleCurrentChange(val) {
                    this.movieId=val.id;
                    this.movieName=val.name;
                    this.movieDate=val.time;
                    this.moviePrice=val.price;
                    this.movieNum=val.num
            },
            lookOrder(movieId){
                this.movieShow = true;
                this.this.movieId=movieId
            }
        }


    }
</script>


<style scoped>

</style>
